<template>
    <div class="receiver-address-wrapper">
      <div class=" padding-12">
        <van-cell-group :border="false">
          <van-field
            v-model="username"
            clearable
            label="收货人"
            placeholder="请填写收货人姓名"
          />
          <van-field
            v-model="userPhone"
            clearable
            label="手机号码"
            placeholder="请填写收货人手机号"
          />
          <van-field
            v-model="userAddress"
            clearable
            label="所在地区"
            placeholder="省、市、区"
            @click="areaChoose"
            ref = "addressDom"
          />
          <van-field
            v-model="userAddressDetail"
            clearable
            label="详细地址"
            placeholder="街道、楼牌号等"
          />
          <van-field/>
        </van-cell-group>

        <!--地区选择-->
        <van-popup
          v-model="showArea"
          position="bottom"
        >
          <van-area :area-list="areaList" @confirm="areaConfirm" @cancel="areaCancel"/>
        </van-popup>
      </div>
      <div class="register-btn">
        <van-button size="large" round class="register-submit-btn" @click="submit">提交</van-button>
      </div>
    </div>
</template>

<script>
    import ajax from '../../module/ajax/public'
    import areaList from '../../module/area'
    import {Button, CellGroup, Field, Area, Popup,Notify } from 'vant';

    export default {
        name: "ReceiverAddress",
        components:{
          [Button.name]: Button,
          [CellGroup.name]: CellGroup,
          [Field.name]: Field,
          [Area.name]: Area,
          [Popup.name]: Popup
        },
        data(){
            return{
              username:'',
              userPhone:'',
              userAddress:'',
              userAddressDetail:'',
              showArea:false,
              areaList:areaList,
              id:1
            }
        },
        mounted(){
           this.id = this.$route.query.id
        },
        methods:{
          areaChoose(){
            this.showArea = true
            this.$refs.addressDom.blur()
          },
          areaConfirm(data){
            // console.log(data)
            let arrTemp = []
            data.forEach( value =>{
              // console.log(value.name)
              arrTemp.push(value.name)
            })
            // console.log(arrTemp)
            this.userAddress = arrTemp.join('-')
            this.showArea = false
          },
          areaCancel(){
            this.showArea = false
          },
          submit(){
            if(this.username == ''){
              Notify({
                message: '请填写姓名'
              });
              return;
            }
            if(this.userPhone == ''){
              Notify({
                message: '请填写手机号码'
              });
              return;
            }
            if(this.userAddress == ''){
              Notify({
                message: '请选择所在地'
              });
              return;
            }
            if(this.userAddressDetail == ''){
              Notify({
                message: '请填写详细地址'
              });
              return;
            }

            ajax.doAction({
              url: '/lab/'+ this.id +'/address',
              type: 'POST',
              items: {
                name:this.username,
                tel:this.userPhone,
                area:this.userAddress,
                address:this.userAddressDetail
              },
              successCallback:(data)=>{
                if (data.code !== 200) {
                  Notify({
                    message: data.msg,
                    duration: 1000
                  })
                  return
                }
                setTimeout(()=>{
                  this.$router.push('/apply-success');
                },1000);
              },
              errorCallback: (data)=> {
                console.log('请求失败');
              }
            })

          },
        }
    }
</script>

<style>
</style>
